{\rtf1\ansi\ansicpg936\cocoartf2822
\cocoatextscaling0\cocoaplatform0{\fonttbl\f0\fswiss\fcharset0 Helvetica;}
{\colortbl;\red255\green255\blue255;}
{\*\expandedcolortbl;;}
\paperw11900\paperh16840\margl1440\margr1440\vieww11520\viewh8400\viewkind0
\pard\tx566\tx1133\tx1700\tx2267\tx2834\tx3401\tx3968\tx4535\tx5102\tx5669\tx6236\tx6803\pardirnatural\partightenfactor0

\f0\fs24 \cf0 <!DOCTYPE html>\
<html lang="en">\
<head>\
    <meta charset="UTF-8">\
    <meta name="viewport" content="width=device-width, initial-scale=1.0">\
    <title>\uc0\u36187 \u21338 \u26379 \u20811 \u20687 \u32032 \u36187 \u36710 </title>\
    <style>\
        body \{\
            margin: 0;\
            padding: 0;\
            display: flex;\
            justify-content: center;\
            align-items: center;\
            height: 100vh;\
            background-color: #0f0f1a;\
            font-family: 'Courier New', monospace;\
            color: #00fffc;\
            overflow: hidden;\
        \}\
        \
        #game-container \{\
            position: relative;\
            width: 400px;\
            height: 600px;\
            background-color: #1a1a2e;\
            border: 4px solid #00fffc;\
            box-shadow: 0 0 20px #00fffc, inset 0 0 20px #00fffc;\
            overflow: hidden;\
        \}\
        \
        #game-canvas \{\
            width: 100%;\
            height: 100%;\
        \}\
        \
        #score-display \{\
            position: absolute;\
            top: 10px;\
            left: 10px;\
            font-size: 20px;\
            text-shadow: 0 0 5px #00fffc;\
        \}\
        \
        #game-over \{\
            position: absolute;\
            top: 0;\
            left: 0;\
            width: 100%;\
            height: 100%;\
            background-color: rgba(15, 15, 26, 0.8);\
            display: none;\
            flex-direction: column;\
            justify-content: center;\
            align-items: center;\
            z-index: 10;\
        \}\
        \
        #game-over h1 \{\
            color: #ff00ff;\
            font-size: 36px;\
            margin-bottom: 20px;\
            text-shadow: 0 0 10px #ff00ff;\
        \}\
        \
        #restart-btn \{\
            padding: 10px 20px;\
            background-color: #00fffc;\
            color: #1a1a2e;\
            border: none;\
            font-family: 'Courier New', monospace;\
            font-size: 18px;\
            cursor: pointer;\
            box-shadow: 0 0 10px #00fffc;\
            transition: all 0.3s;\
        \}\
        \
        #restart-btn:hover \{\
            background-color: #ff00ff;\
            box-shadow: 0 0 15px #ff00ff;\
        \}\
        \
        #instructions \{\
            position: absolute;\
            bottom: 10px;\
            left: 10px;\
            font-size: 14px;\
            color: #00fffc;\
        \}\
    </style>\
</head>\
<body>\
    <div id="game-container">\
        <canvas id="game-canvas"></canvas>\
        <div id="score-display">\uc0\u20998 \u25968 : 0</div>\
        <div id="game-over">\
            <h1>\uc0\u28216 \u25103 \u32467 \u26463 </h1>\
            <button id="restart-btn">\uc0\u37325 \u26032 \u24320 \u22987 </button>\
        </div>\
        <div id="instructions">\uc0\u26041 \u21521 \u38190  \u8592  \u8594  \u25511 \u21046 \u31227 \u21160 </div>\
    </div>\
\
    <script>\
        // \uc0\u28216 \u25103 \u21464 \u37327 \
        const canvas = document.getElementById('game-canvas');\
        const ctx = canvas.getContext('2d');\
        const scoreDisplay = document.getElementById('score-display');\
        const gameOverScreen = document.getElementById('game-over');\
        const restartBtn = document.getElementById('restart-btn');\
        \
        // \uc0\u35774 \u32622 \u30011 \u24067 \u23610 \u23544 \
        canvas.width = 400;\
        canvas.height = 600;\
        \
        // \uc0\u28216 \u25103 \u29366 \u24577 \
        let gameRunning = true;\
        let score = 0;\
        let speed = 3;\
        let roadWidth = 300;\
        let roadX = (canvas.width - roadWidth) / 2;\
        \
        // \uc0\u29609 \u23478 \u36710 \u36742 \
        const player = \{\
            x: canvas.width / 2 - 15,\
            y: canvas.height - 80,\
            width: 30,\
            height: 50,\
            color: '#00fffc',\
            speed: 5\
        \};\
        \
        // \uc0\u38556 \u30861 \u29289 \u21644 \u33021 \u37327 \u22359 \
        let obstacles = [];\
        let energyCells = [];\
        let lastObstacleTime = 0;\
        let lastEnergyTime = 0;\
        \
        // \uc0\u36187 \u21338 \u26379 \u20811 \u38675 \u34425 \u33394 \
        const neonColors = ['#00fffc', '#ff00ff', '#ff6bff', '#00ff9d', '#ff3d7f'];\
        \
        // \uc0\u36947 \u36335 \u26631 \u35760 \
        let roadMarkers = [];\
        for (let i = 0; i < 10; i++) \{\
            roadMarkers.push(\{\
                y: i * 100 - 50,\
                width: 10,\
                height: 30,\
                color: '#00fffc'\
            \});\
        \}\
        \
        // \uc0\u32972 \u26223 \u26143 \u26143 \
        let stars = [];\
        for (let i = 0; i < 50; i++) \{\
            stars.push(\{\
                x: Math.random() * canvas.width,\
                y: Math.random() * canvas.height,\
                size: Math.random() * 3,\
                color: neonColors[Math.floor(Math.random() * neonColors.length)]\
            \});\
        \}\
        \
        // \uc0\u38190 \u30424 \u25511 \u21046 \
        const keys = \{\
            ArrowLeft: false,\
            ArrowRight: false\
        \};\
        \
        // \uc0\u20107 \u20214 \u30417 \u21548 \
        window.addEventListener('keydown', (e) => \{\
            if (e.key in keys) \{\
                keys[e.key] = true;\
            \}\
        \});\
        \
        window.addEventListener('keyup', (e) => \{\
            if (e.key in keys) \{\
                keys[e.key] = false;\
            \}\
        \});\
        \
        restartBtn.addEventListener('click', restartGame);\
        \
        // \uc0\u28216 \u25103 \u20027 \u24490 \u29615 \
        function gameLoop() \{\
            if (!gameRunning) return;\
            \
            update();\
            render();\
            \
            requestAnimationFrame(gameLoop);\
        \}\
        \
        // \uc0\u26356 \u26032 \u28216 \u25103 \u29366 \u24577 \
        function update() \{\
            // \uc0\u31227 \u21160 \u29609 \u23478 \
            if (keys.ArrowLeft && player.x > roadX + 20) \{\
                player.x -= player.speed;\
            \}\
            if (keys.ArrowRight && player.x < roadX + roadWidth - player.width - 20) \{\
                player.x += player.speed;\
            \}\
            \
            // \uc0\u31227 \u21160 \u36947 \u36335 \u26631 \u35760 \
            roadMarkers.forEach(marker => \{\
                marker.y += speed;\
                if (marker.y > canvas.height) \{\
                    marker.y = -50;\
                \}\
            \});\
            \
            // \uc0\u29983 \u25104 \u38556 \u30861 \u29289 \
            const now = Date.now();\
            if (now - lastObstacleTime > 1500) \{\
                createObstacle();\
                lastObstacleTime = now;\
            \}\
            \
            // \uc0\u29983 \u25104 \u33021 \u37327 \u22359 \
            if (now - lastEnergyTime > 3000) \{\
                createEnergyCell();\
                lastEnergyTime = now;\
            \}\
            \
            // \uc0\u26356 \u26032 \u38556 \u30861 \u29289 \u20301 \u32622 \
            obstacles.forEach((obstacle, index) => \{\
                obstacle.y += speed;\
                \
                // \uc0\u26816 \u27979 \u30896 \u25758 \
                if (checkCollision(player, obstacle)) \{\
                    gameOver();\
                \}\
                \
                // \uc0\u31227 \u38500 \u23631 \u24149 \u22806 \u30340 \u38556 \u30861 \u29289 \
                if (obstacle.y > canvas.height) \{\
                    obstacles.splice(index, 1);\
                    score += 1;\
                    updateScore();\
                \}\
            \});\
            \
            // \uc0\u26356 \u26032 \u33021 \u37327 \u22359 \u20301 \u32622 \
            energyCells.forEach((cell, index) => \{\
                cell.y += speed;\
                \
                // \uc0\u26816 \u27979 \u25910 \u38598 \
                if (checkCollision(player, cell)) \{\
                    energyCells.splice(index, 1);\
                    score += 5;\
                    updateScore();\
                \}\
                \
                // \uc0\u31227 \u38500 \u23631 \u24149 \u22806 \u30340 \u33021 \u37327 \u22359 \
                if (cell.y > canvas.height) \{\
                    energyCells.splice(index, 1);\
                \}\
            \});\
            \
            // \uc0\u38543 \u26426 \u25913 \u21464 \u36947 \u36335 \u23485 \u24230 \u21644 \u20301 \u32622 \
            if (Math.random() < 0.01) \{\
                roadWidth = 250 + Math.random() * 100;\
                roadX = (canvas.width - roadWidth) / 2;\
            \}\
            \
            // \uc0\u36880 \u28176 \u22686 \u21152 \u38590 \u24230 \
            if (score % 20 === 0 && score > 0) \{\
                speed = 3 + Math.floor(score / 20) * 0.5;\
            \}\
        \}\
        \
        // \uc0\u28210 \u26579 \u28216 \u25103 \u30011 \u38754 \
        function render() \{\
            // \uc0\u28165 \u31354 \u30011 \u24067 \
            ctx.fillStyle = '#1a1a2e';\
            ctx.fillRect(0, 0, canvas.width, canvas.height);\
            \
            // \uc0\u32472 \u21046 \u26143 \u26143 \u32972 \u26223 \
            stars.forEach(star => \{\
                ctx.fillStyle = star.color;\
                ctx.fillRect(star.x, star.y, star.size, star.size);\
            \});\
            \
            // \uc0\u32472 \u21046 \u36947 \u36335 \
            ctx.fillStyle = '#2a2a3a';\
            ctx.fillRect(roadX, 0, roadWidth, canvas.height);\
            \
            // \uc0\u32472 \u21046 \u36947 \u36335 \u26631 \u35760 \
            roadMarkers.forEach(marker => \{\
                ctx.fillStyle = marker.color;\
                ctx.fillRect(canvas.width / 2 - marker.width / 2, marker.y, marker.width, marker.height);\
            \});\
            \
            // \uc0\u32472 \u21046 \u36947 \u36335 \u36793 \u32536 \
            ctx.strokeStyle = '#00fffc';\
            ctx.lineWidth = 4;\
            ctx.beginPath();\
            ctx.moveTo(roadX, 0);\
            ctx.lineTo(roadX, canvas.height);\
            ctx.moveTo(roadX + roadWidth, 0);\
            ctx.lineTo(roadX + roadWidth, canvas.height);\
            ctx.stroke();\
            \
            // \uc0\u32472 \u21046 \u38556 \u30861 \u29289 \
            obstacles.forEach(obstacle => \{\
                ctx.fillStyle = obstacle.color;\
                ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);\
                \
                // \uc0\u28155 \u21152 \u20687 \u32032 \u39118 \u26684 \u25928 \u26524 \
                ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';\
                for (let i = 0; i < 5; i++) \{\
                    ctx.fillRect(\
                        obstacle.x + Math.random() * obstacle.width,\
                        obstacle.y + Math.random() * obstacle.height,\
                        2, 2\
                    );\
                \}\
            \});\
            \
            // \uc0\u32472 \u21046 \u33021 \u37327 \u22359 \
            energyCells.forEach(cell => \{\
                ctx.fillStyle = cell.color;\
                ctx.fillRect(cell.x, cell.y, cell.width, cell.height);\
                \
                // \uc0\u28155 \u21152 \u21457 \u20809 \u25928 \u26524 \
                ctx.shadowColor = cell.color;\
                ctx.shadowBlur = 10;\
                ctx.fillRect(cell.x, cell.y, cell.width, cell.height);\
                ctx.shadowBlur = 0;\
                \
                // \uc0\u28155 \u21152 \u20687 \u32032 \u39118 \u26684 \u25928 \u26524 \
                ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';\
                for (let i = 0; i < 3; i++) \{\
                    ctx.fillRect(\
                        cell.x + Math.random() * cell.width,\
                        cell.y + Math.random() * cell.height,\
                        2, 2\
                    );\
                \}\
            \});\
            \
            // \uc0\u32472 \u21046 \u29609 \u23478 \u36710 \u36742 \
            ctx.fillStyle = player.color;\
            ctx.fillRect(player.x, player.y, player.width, player.height);\
            \
            // \uc0\u28155 \u21152 \u36710 \u36742 \u32454 \u33410 \
            ctx.fillStyle = '#1a1a2e';\
            ctx.fillRect(player.x + 5, player.y + 5, player.width - 10, 10);\
            ctx.fillRect(player.x + 5, player.y + 25, player.width - 10, 10);\
            \
            // \uc0\u28155 \u21152 \u36710 \u28783 \u25928 \u26524 \
            ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';\
            ctx.fillRect(player.x + 5, player.y - 2, 5, 5);\
            ctx.fillRect(player.x + player.width - 10, player.y - 2, 5, 5);\
            \
            // \uc0\u28155 \u21152 \u20687 \u32032 \u39118 \u26684 \u25928 \u26524 \
            ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';\
            for (let i = 0; i < 5; i++) \{\
                ctx.fillRect(\
                    player.x + Math.random() * player.width,\
                    player.y + Math.random() * player.height,\
                    2, 2\
                );\
            \}\
        \}\
        \
        // \uc0\u21019 \u24314 \u38556 \u30861 \u29289 \
        function createObstacle() \{\
            const width = 30 + Math.random() * 40;\
            const height = 30 + Math.random() * 40;\
            const x = roadX + 20 + Math.random() * (roadWidth - width - 40);\
            const color = neonColors[Math.floor(Math.random() * neonColors.length)];\
            \
            obstacles.push(\{\
                x,\
                y: -height,\
                width,\
                height,\
                color\
            \});\
        \}\
        \
        // \uc0\u21019 \u24314 \u33021 \u37327 \u22359 \
        function createEnergyCell() \{\
            const size = 20;\
            const x = roadX + 20 + Math.random() * (roadWidth - size - 40);\
            const color = '#ff00ff';\
            \
            energyCells.push(\{\
                x,\
                y: -size,\
                width: size,\
                height: size,\
                color\
            \});\
        \}\
        \
        // \uc0\u26816 \u27979 \u30896 \u25758 \
        function checkCollision(rect1, rect2) \{\
            return (\
                rect1.x < rect2.x + rect2.width &&\
                rect1.x + rect1.width > rect2.x &&\
                rect1.y < rect2.y + rect2.height &&\
                rect1.y + rect1.height > rect2.y\
            );\
        \}\
        \
        // \uc0\u26356 \u26032 \u20998 \u25968 \u26174 \u31034 \
        function updateScore() \{\
            scoreDisplay.textContent = `\uc0\u20998 \u25968 : $\{score\}`;\
        \}\
        \
        // \uc0\u28216 \u25103 \u32467 \u26463 \
        function gameOver() \{\
            gameRunning = false;\
            gameOverScreen.style.display = 'flex';\
        \}\
        \
        // \uc0\u37325 \u26032 \u24320 \u22987 \u28216 \u25103 \
        function restartGame() \{\
            gameRunning = true;\
            score = 0;\
            speed = 3;\
            roadWidth = 300;\
            roadX = (canvas.width - roadWidth) / 2;\
            player.x = canvas.width / 2 - 15;\
            player.y = canvas.height - 80;\
            obstacles = [];\
            energyCells = [];\
            lastObstacleTime = 0;\
            lastEnergyTime = 0;\
            updateScore();\
            gameOverScreen.style.display = 'none';\
            gameLoop();\
        \}\
        \
        // \uc0\u24320 \u22987 \u28216 \u25103 \
        gameLoop();\
    </script>\
</body>\
</html>}